<template>
  <ul>
    <li v-for="(value, key) in message" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</template>

<script>
export default {
  name: "Detail",
  props: ["name", "age", "id"],
  data() {
    return {
      message: {},
    };
  },
  mounted() {
    /*  
      $route
        params
        path
      $router
    */
    // console.log(this);
  },
  methods: {
    getMessage() {
      setTimeout(() => {
        const id = this.$route.params.id;

        this.message = {
          id,
          title: "message" + id,
          content: "content" + id,
        };
      }, 1000);
    },
  },
  watch: {
    // 每次更新地址，都会改变$route
    $route: {
      handler() {
        this.getMessage();
      },
      immediate: true,
    },
  },
};
</script>

<style>
</style>